<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>Resume列表</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <style>
        table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}
    </style>
</head>

<body>
<br>
<input type="button" value="登出" onclick="loginout()" ><input type="button" value="新增" onclick="add()">
<table>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>ADDRESS</th>
        <th>PHONE</th>
        <th>操作</th>
    </tr>

    <c:forEach items="${requestScope.list}" var="resume" varStatus="id">
        <tr>
        <td>${resume.id}</td>
        <td>${resume.name}</td>
        <td>${resume.address}</td>
        <td>${resume.phone}</td>
        <td><input type="button" value="编辑" name="edit" onclick="edit(this)"><input type="button" value="删除" name="del" onclick="del(this)"></td>
        </tr>
    </c:forEach>
</table>
<br>

<script>
    function edit(obj) {
        //判断按钮的文本是编辑还是保存
        //获取 id
        var id = obj.parentNode.parentNode.firstElementChild.innerHTML;
        var tds = obj.parentNode.parentNode.children;
        //最后一个元素的值编程保存
        var len = tds.length;
        if(obj.value=="编辑"){
            //设置该行元素可编辑
            for(var i=0; i<tds.length-1; i++){
                tds[i].contentEditable=true;
            }
            tds[len-1].firstElementChild.value="保存";
            //设置光标位置
            tds[0].focus();
        }else{
            //发送请求更新
            var name = tds[1].innerHTML.trim();
            var address = tds[2].innerHTML.trim();
            var phone = tds[3].innerHTML.trim();
            //发送请求到后端
            window.location.href="update?id="+id+"&name="+name+"&address="+address+"&phone="+phone;

        }
    }

    function del(obj) {
        var id = obj.parentNode.parentNode.firstElementChild.innerHTML;
        window.location.href="delete?id="+id;

    }

    function add() {
        window.location.href="add";

    }

    function loginout() {
        window.location.href="loginout"

    }



</script>
</body>
</html>